{% extends "base.html" %}
{%load staticfiles%}

{% block css %}
<link rel="stylesheet" href="{% static 'bower_components/select2/dist/css/select2.min.css' %}">
<link rel="stylesheet" href="{% static 'dist/css/dataTables.bootstrap.min.css' %}">
{% endblock %}

{% block content %}
  <section class="content-header">
    <h1>
      工作流管理
      <small>通知管理</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="/manage/workflow_manage"><i class="fa fa-dashboard"></i> 工作流管理</a></li>
    </ol>
  </section>
  <section class="content">
    <div class="callout callout-info">
      当工单状态变化时将根据对应工作流配置的通知,向hook_url发送post请求,使用token生成签名,详见文档
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="box box-default">
          <button type="button" class="btn btn-success" data-toggle="modal" data-target="#noticeModal">
              新增
          </button>
          <table id="notice_table" class="table table-striped table-bordered dataTable no-footer" >
            <thead>
              <tr>
                <th>ID</th>
                <th>名称</th>
                <th>描述</th>
                <th>创建人</th>
                <th>创建时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal fade" id="noticeModal">
        <div class="modal-dialog" style="width: 980px;">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">工作流通知</h4>
            </div>
            <div class="modal-body">
              <form class="form-horizontal" id='notice_form'>
                <div class="box-body">
                  <div class="form-group">
                    <label for="noticeName" class="col-sm-3 control-label">名称</label> 
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="noticeName" placeholder="请输入通知名称">
                    </div>
                  </div>
                  <div class="form-group">
                      <label for="noticeDesc" class="col-sm-3 control-label">描述</label> 
                      <div class="col-sm-9">
                        <input type="text" class="form-control" id="noticeDesc" placeholder="请输入通知描述">
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="hookUrl" class="col-sm-3 control-label">hook url</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" id="hookUrl" placeholder="请输入hook地址">
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="hookToken" class="col-sm-3 control-label">hook token</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" id="hookToken" placeholder="请输入hook token">
                      </div>
                  </div>
                  <input type="number" class="form-control" id="noticeId" style="display:none">

                </div>
                <div class="box-footer">
                  <input type="button" value="保存" class="btn btn-info pull-right" onclick = "submitNotice();" />
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>    
    </div>
  </section>

{% endblock %}

{% block js %}
<!-- jQuery 3 -->
<script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>
<script src="{% static 'bower_components/select2/dist/js/select2.full.min.js' %}"></script>

<script src="{% static 'dist/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'dist/js/dataTables.bootstrap.min.js' %}"></script>
<script src="{% static 'dist/js/jquery.validate.js' %}"></script>
<script src="{% static 'dist/js/sweetalert.min.js' %}"></script>


<script src="{% static 'dist/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'dist/js/dataTables.bootstrap.min.js' %}"></script>
<script src="{% static 'dist/js/jquery.validate.js' %}"></script>
<script src="{% static 'dist/js/sweetalert.min.js' %}"></script>


<script src="{% static 'dist/js/workflow/notice_manage.js' %}"></script>

<script>


</script>
{% endblock %}
